<html>
	<head>
		<title>GPS导航</title>
		<!--
		margin 外边距 盒子与其他外边元素的距离
		margin：上下左右
		img 图片标签 src 图片的路径
		input 表单标签 type = “text” 表示这是一个单行文本框
		div 盒子 容器 层
		以class = “自定义名称”的样式称之为类样式
		box-shadow：阴影水平移动 阴影垂直移动 阴影模糊度;
		transform:rotate(360deg) 360度旋转
		transition:0.3s延迟
		transform:translateY(1px) translateX(1px)左右移动
		vh 视图高度 等分成100份 取其中的93份
		93% 找父级
		vh 与 %对比
		区别：找到参考对象不一样
		vh：浏览器的窗口
		-->
		<style>
		 body{margin:0;}
		.head{height:120px;background:#fff;box-shadow:0 0 5px #000;}
		.head .center{width:90%;height:120px;margin:0 auto;}
		.head .search{width:500;height:120px;float:right;font-weight:700;}
		.head .center .search .txt{width:150px;height:40px;margin-top:40px;}
		.head .center .search .but{width:60px;height:40px;border:none;outline:none;background:#cecece;border-radius:4px;color:4b4b4b;box-shadow:1px 1px 5px #b1afaf;}
		.head .center .search .but:active{background:#b1afaf;box-shadow:none;}
		#myMap{height:93vh;background:#83afc5}
		</style>
	</head>
	
	<body>
		
		<div class = "head">
			<div class = "center">
			
				<img src = "D:\GPS\images\kpl.jpg" width = "230" height= "120" alt = "jiege">
				<div class = "search">
					起点：<input type = "text" class = "txt" id = "start">
					终点：<input type = "text" class = "txt" id = "end">
					<input type = "button" value = "查询" class = "but" onclick = "search(this)">
				</div>
			</div>
		</div>
		<div id = "myMap">
		</div>
		
		<script type="text/javascript" 
		src="https://webapi.amap.com/maps?v=1.4.15&key=b9136187acd96a50e76b812f94347ff2&plugin=AMap.Driving"></script> 
		<script>
			//初始化地图
			var map = new AMap.Map("myMap",{
				zoom:10
			});
			//创建路径导航规划
			var dirving = new AMap.Driving({
				map:map
			});
			//获取输入框里面的值
			function search(){
			var start = document.getElementById("start").value;
			var end = document.getElementById("end").value;
				//根据起点和终点规划导航路线
				dirving.search([
				{city:start},
				{city:end}
				]);
			}
			
		</script>
	</body>
</html>